<template>
  <view class="w-full h-screen bg-[#f8f9fb] p-4 flex flex-col gap-4">
    <!-- 用户信息 -->
    <view class="flex items-center gap-3 p-4 rounded-2xl">
      <image
        :src="useUser.getUser.avatar"
        class="w-[100rpx] h-[100rpx] rounded-full"
      />
      <view>
        <text class="text-lg font-bold">{{ useUser.getUser.name }}</text>
        <text class="block text-gray-500 text-sm">{{ house }}</text>
      </view>
    </view>

    <!-- 已绑定车位 -->
    <view
      v-if="hasCarPlace"
      class="w-[84%] p-4 bg-white rounded-2xl shadow flex flex-col gap-2"
    >
      <view class="flex justify-between items-center">
        <text class="text-xl font-bold">车位 {{ carplace[0].location }}</text>
        <text
          class="px-2 py-1 text-sm rounded-full bg-green-100 text-green-600"
        >
          已绑定
        </text>
      </view>
      <text class="text-gray-600">位置：地下一层 A区</text>
      <text class="text-gray-600">绑定车辆：{{ carplace[0].carPlate }}</text>
      <text class="text-gray-600"
        >有效期：{{ carplace[0].feeValidityPeriod ?? '长期' }}</text
      >
    </view>

    <!-- 无车位提示 -->
    <view
      v-else
      class="w-[84%] p-8 bg-white rounded-2xl shadow flex flex-col items-center justify-center gap-4"
    >
      <image
        :src="useUser.getUser.avatar"
        class="w-[160rpx] h-[160rpx] rounded-full opacity-40"
      />
      <text class="text-lg text-gray-500">当前暂无绑定车位</text>
      <text class="text-sm text-gray-400 text-center">
        您可以通过下方按钮申请绑定车位
      </text>
    </view>

    <!-- 车位示意图 -->
    <view class="w-[84%] p-4 bg-white rounded-2xl shadow">
      <text class="text-gray-700 font-bold mb-2">车位示意图</text>
      <view class="flex items-center justify-between flex-wrap mt-3">
        <view
          class="w-[32%] h-[160rpx] flex items-center justify-center bg-gray-100 rounded mb-2"
          >{{
            `${carplace[0].location[0]}00${Number(carplace[0].location.slice(1)) - 1}`
          }}</view
        >
        <view
          class="w-[32%] h-[160rpx] flex items-center justify-center rounded mb-2"
          :class="hasCarPlace ? 'bg-blue-500 text-white' : 'bg-gray-100'"
          >{{ carplace[0].location }}</view
        >
        <view
          class="w-[32%] h-[160rpx] flex items-center justify-center bg-gray-100 rounded mb-2"
          >{{
            `${carplace[0].location[0]}00${Number(carplace[0].location.slice(1)) + 1}`
          }}</view
        >
        <view
          class="w-[32%] h-[160rpx] flex items-center justify-center bg-gray-100 rounded mb-2"
          >{{
            `${carplace[0].location[0]}00${Number(carplace[0].location.slice(1)) + 2}`
          }}</view
        >
      </view>
    </view>

    <!-- 申请绑定按钮 -->
    <view v-if="!hasCarPlace" class="w-[84%] p-4 flex justify-center">
      <button
        class="w-[80%] h-[100rpx] flex bg-blue-500 text-white justify-center items-center rounded-xl"
        @click="showPopup = true"
      >
        申请绑定车位
      </button>
    </view>

    <!-- 弹出层 -->
    <wd-popup
      v-model="showPopup"
      custom-style="border-radius:32rpx;padding:40rpx 30rpx;"
      @close="handleClose"
    >
      <view class="flex flex-col gap-6">
        <text class="text-xl font-bold text-center mb-2">绑定车位申请</text>
        <wd-input type="text" v-model="location" placeholder="请输入车位号" />
        <wd-input
          type="text"
          v-model="plateInput"
          placeholder="请输入车牌号"
          @change="handleChange"
        />
        <button
          class="w-full h-[90rpx] bg-blue-500 text-white rounded-xl mt-4"
          @click="handleSubmit"
        >
          提交绑定
        </button>
      </view>
    </wd-popup>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { addParking, getParking } from '@/api/carplace'
import { onLoad } from '@dcloudio/uni-app'
import useStore from '@/store'

const { useUser } = useStore()

const house = uni.getStorageSync('house_name').name

const carplace = ref<any>([])
const hasCarPlace = ref(false)
const showPopup = ref(false)
const plateInput = ref('')
const plateNumber = ref('')
const location = ref('')

function handleChange(event: any) {
  console.log('输入变化：', event)
}

async function handleSubmit() {
  if (!plateInput.value.trim()) {
    uni.showToast({ title: '请输入车位号', icon: 'none' })
    return
  }
  plateNumber.value = plateInput.value
  const res = await addParking({
    location: location.value,
    carPlate: plateNumber.value,
    user_id: useUser.getUser.id
  })
  if (res.code === 200) {
    hasCarPlace.value = true
    showPopup.value = false
    uni.showToast({ title: '绑定成功', icon: 'success' })
  } else {
    uni.showToast({ title: res.msg, icon: 'none' })
  }
}

function handleClose() {
  plateInput.value = ''
}

onLoad(async () => {
  const res = await getParking({
    user_id: useUser.getUser.id
  })
  if (res.code === 200) {
    hasCarPlace.value = res.data.items.length > 0
    carplace.value = res.data.items
  }
})
</script>
